<template>
    <div>
        <el-container style="height: 100vh;"> <!-- 外层容器高度设为 100vh -->
        <el-header style="background-color: antiquewhite; height: 80px;">
            <el-row>
                <el-col :span="2"><div class="grid-content bg-purple">
                    <el-image 
                        style="width: 60px; height: 60px;margin-top: 10px; border-radius: 50%;"
                        src= "http://192.168.6.27:9000/image/image_1747465732551.jpg">
                    </el-image>
                </div></el-col>
                <el-col :span="5"><div class="grid-content bg-purple-light">
                    <h1>生鲜电商—后台管理系统</h1>
                </div></el-col>
                <!-- 向右偏置5格 -->
                <el-col :span="3" :offset="14">
                    <el-dropdown>
                        <div class="el-dropdown-link" style="margin-top: 20px;display: flex;align-items: center;justify-content: center;">
                            <el-avatar :src="administrator.administratorImgSrc"> user </el-avatar>
                            <span style="margin-left: 8px;">{{administrator.administratorName}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="goToAccountInfo">账号信息</el-dropdown-item>
                            <el-dropdown-item @click.native="goToChangePassword">修改密码</el-dropdown-item>
                            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <!-- 移除 el-col，直接放 el-menu，并设置高度撑满 -->
            <el-aside width="200px" style="background-color: #FFFFFF; height: calc(100vh - 60px);">
            <el-menu
                router
                default-active="2"
                class="el-menu-vertical-demo"
                style="border-right: none;" 
                @open="handleOpen"
                @close="handleClose">

                <el-submenu index="1">
                <template slot="title">
                    <span style="font-weight: bold;">用户管理</span>
                </template>
                <el-menu-item-group class="custom-align-right">                    
                    <el-menu-item index="RoleInformation">用户信息</el-menu-item>
                    <el-menu-item index="characterInformation">角色信息</el-menu-item>
                </el-menu-item-group>
                </el-submenu>

                <el-submenu index="2">
                <template slot="title">
                    <span style="font-weight: bold;">商品管理</span>
                </template>
                <el-menu-item-group class="custom-align-right">                    
                    <el-menu-item index="/GoodsList">商品信息</el-menu-item>
                    <el-menu-item index="/GoodsTypeList">商品分类</el-menu-item>
                </el-menu-item-group>
                </el-submenu>
                
                <el-menu-item index="/orders">
                    <span slot="title" style="font-weight: bold;">订单管理</span>
                </el-menu-item>

                <el-menu-item index="/timesale">
                <span slot="title" style="font-weight: bold;">活动管理</span>
                </el-menu-item>

                <el-menu-item index="/warehouseList">
                <span slot="title" style="font-weight: bold;">仓库管理</span>
                </el-menu-item>
                
                <el-menu-item index="/sorting">
                <span slot="title" style="font-weight: bold;">分拣监控</span>
                </el-menu-item>

                <el-menu-item index="/Delivery">
                <span slot="title" style="font-weight: bold;">配送监控</span>
                </el-menu-item>

            </el-menu>
            </el-aside>
            <el-main style="background-color: #F5F5F5; padding: 20px;">
                <router-view @transmit="receiveAdministratorId"></router-view>

            </el-main>
        </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            administratorId: '1',
            administrator: {},
        }
    },
    methods: {
        receiveAdministratorId(administratorId) {
            this.administratorId = administratorId;
            this.$axios.get('/api/user/queryAdministratorInfo/'+this.administratorId).then(res => {
            if(res.data.code === 200) {
                this.administrator = res.data.data;
            }
        })
        },
       
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        goToAccountInfo() {
            this.$router.push({path: '/account-info', query: {administratorId: this.administratorId}});
        },
        goToChangePassword() {
            this.$router.push('/change-password');
        },
        logout() {
            // TODO: 实现退出登录逻辑
            this.$message.success('退出成功');
            this.$router.push('/');
        }
    },
    created() {
        //获取参数
       
        this.$axios.get('/api/user/queryAdministratorInfo/'+this.administratorId).then(res => {
            if(res.data.code === 200) {
                this.administrator = res.data.data;
            }
        })


}
}
</script>

<style scoped>
     /* 自定义样式类，使菜单项靠右对齐 */
    .custom-align-right {
        text-align: right;
    }
</style>